<template>
  <div class="home-page">
    <div class="home-page-content">
      <div class="con-top">
        <div class="con-left">
          <div class="con-left-btm">
            <Todo></Todo>
          </div>
        </div>
        <div class="con-right">
          <div class="con-right-top">
            <CommonUse></CommonUse>
          </div>
          <div class="con-right-btm">
            <WorkNotice></WorkNotice>
          </div>
        </div>
      </div>
      <div class="con-bottom">
        <div class="con-left">
          <MertisCon></MertisCon>
        </div>
        <div class="con-right">
          <MessageCenter></MessageCenter>
        </div>
      </div>
    </div>

    <!-- 公示榜dialog -->
    <XnDialog custom-class="honour" title="" :visible.sync="honourDialogShow" @close="honourClose">
      <i class="el-icon-close" @click.stop="honourClose"></i>
      <div class="honour_box">
        <div class="cup">
          <img src="@images/home/honor-dialog.png" alt="" />
        </div>
        <div class="tit">{{ honourInfo.title || '平时考核公示榜已发布' }}</div>
        <div class="route" @click="goToHonour">点我前往查看</div>
      </div>
    </XnDialog>

    <XnDialog
      custom-class="collect_dialog"
      :visible.sync="resultTipDiaShow"
      @close="resultTipDiaShow = false"
      width="600px"
      title="考核结果确认">
      <div class="dia_con">
        <h3>{{ rankTipsContentVO.periodName }}结果说明：</h3>
        <p>一般工作人员：参评{{ rankTipsContentVO.workTotal }}人</p>
        <div class="detail">
          <span>好：{{ rankTipsContentVO.workRank1 }}人</span>
          <span>较好：{{ rankTipsContentVO.workRank2 }}人</span>
          <span>一般：{{ rankTipsContentVO.workRank3 }}人</span>
          <span>较差：{{ rankTipsContentVO.workRank4 }}人</span>
          <!-- <span>不评等次：{{ rankTipsContentVO.workRank6 }}人</span> -->
        </div>
        <p>处长：参评{{ rankTipsContentVO.leaderTotal }}人</p>
        <div class="detail">
          <span>好：{{ rankTipsContentVO.leaderRank1 }}人</span>
          <span>较好：{{ rankTipsContentVO.leaderRank2 }}人</span>
          <span>一般：{{ rankTipsContentVO.leaderRank3 }}人</span>
          <span>较差：{{ rankTipsContentVO.leaderRank4 }}人</span>
          <!-- <span>不评等次：{{ rankTipsContentVO.leaderRank6 }}人</span> -->
        </div>
      </div>
      <div class="submit_tips">
        <el-button @click="resultTipDiaShow = false" size="small">取 消</el-button>
        <el-button type="primary" size="small" @click="goSureGrade">确 定</el-button>
        <el-checkbox v-model="resultChecked">不再提示</el-checkbox>
      </div>
    </XnDialog>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import Todo from './components/Todo.vue'
import CommonUse from './components/CommonUse'
import WorkNotice from './components/WorkNotice.vue'
import MertisCon from './components/MertisCon.vue'
import MessageCenter from './components/MessageCenter'
import XnDialog from '@com/xnDialog.vue'
import { getRankTipsContent, controlRankTipsUnRemind } from '@apis/grade.js'
import { getHonorRollTip } from '@apis/merits.js'
import { listRecursiveMenuByBelong } from '@apis/home.js'
export default {
  name: 'HomePageRoot',
  components: { Todo, CommonUse, WorkNotice, MertisCon, MessageCenter, XnDialog },
  data() {
    return {
      // 绩效榜弹框是否展示
      honourDialogShow: false,
      // 绩效榜弹框信息
      honourInfo: {},
      rankTipsContentVO: {},
      resultChecked: true,
      resultTipDiaShow: false,
    }
  },
  computed: {
    ...mapGetters('role', ['isMainRole', 'isOrgRole']),
  },
  created() {
    if (this.isMainRole) {
      this.getRankTipsContent()
    }
    this.getHonorRollTip()
    // this.getlistRecursiveMenuByBelong()
  },
  methods: {
    honourClose() {
      this.honourDialogShow = false
    },
    // 跳转公示榜
    goToHonour() {
      this.honourDialogShow = false
      this.$router.push({
        path: '/roster/honor',
      })
    },
    getRankTipsContent() {
      getRankTipsContent().then(res => {
        if (res.status === 200 && res.data.showRankTips === 1) {
          this.rankTipsContentVO = res.data.rankTipsContentVO || {}
          this.resultTipDiaShow = true
        }
      })
    },
    goSureGrade() {
      if (this.resultChecked) {
        controlRankTipsUnRemind({
          quarter: this.rankTipsContentVO.quarter,
          year: this.rankTipsContentVO.year,
        })
      }
      this.$router.push({
        path: '/grade-manage',
      })
      this.resultTipDiaShow = false
    },
    // 获取公示榜展示信息
    getHonorRollTip() {
      getHonorRollTip({}).then(res => {
        if (res.status === 200) {
          if (res.data.type !== 0) {
            this.honourInfo = res.data || {}
            this.honourDialogShow = true
          }
        }
      })
    },
    async getlistRecursiveMenuByBelong() {
      const { data } = await listRecursiveMenuByBelong({
        belongPage: 'HOME_APPLY',
      })
      console.log('data :>> ', data)
    },
  },
}
</script>

<style lang="scss" scoped>
.home-page {
  height: 100%;
  width: 100%;
  position: relative;
  background-repeat: no-repeat;
  padding: 10px 40px 20px;
  z-index: 99;
  overflow: hidden;
  overflow-y: auto;

  &-content {
    height: 100%;
    max-width: 1920px;
    margin: 0 auto;
    background-color: transparent;
    // display: flex;
    // flex-direction: column;
    .con-top {
      display: flex;
      align-items: stretch;
      .con-left,
      .con-right {
        position: relative;
        height: 500px;
      }
      .con-left {
        width: 65%;
        margin-right: 20px;
        .con-left-btm {
          height: 100%;
          background-color: #fff;
          // padding: 20px;
          border-top-left-radius: 20px;
          position: relative;
          box-shadow: 0px 0px 10px 0px rgba(3, 37, 86, 0.2);
        }
      }
      .con-right {
        flex: 1;
        .con-right-top,
        .con-right-btm {
          height: 230px;
          padding: 20px 0;
          background-color: #fff;
          box-shadow: 0px 0px 10px 0px rgba(3, 37, 86, 0.2);
        }
        .con-right-btm {
          margin-top: 18px;
          height: 252px;
        }
      }
    }
    .con-bottom {
      // height: calc(100% - 520px);
      height: 300px;
      margin-top: 20px;
      display: flex;
      align-items: stretch;
      overflow: hidden;
      .con-left {
        width: 65%;
        margin-right: 20px;
      }
      .con-right {
        flex: 1;
        overflow: hidden;
      }
    }
  }
  &::-webkit-scrollbar {
    background-color: transparent;
  }
}
.honour {
  ::v-deep &.el-dialog {
    width: 400px;
    .el-dialog__header {
      display: none;
    }
    .el-dialog__body {
      padding: 0;
      position: relative;
      .el-icon-close {
        position: absolute;
        right: 5px;
        top: 5px;
        font-size: 24px;
        color: #999999;
        cursor: pointer;
        z-index: 11;
      }
    }
    .honour_box {
      text-align: center;
      .cup img {
        width: 400px;
      }
      .tit {
        font-size: 16px;
        color: #333333;
        margin-top: -20px;
      }
      .route {
        margin: 15px 0 30px;
        font-size: 16px;
        text-decoration: underline;
        color: #2670df;
        cursor: pointer;
      }
    }
  }
}
/deep/.dia_con {
  h3,
  p {
    color: #333333 !important;
  }
  p {
    margin-top: 10px;
    margin-bottom: 5px;
  }
  .detail {
    padding-left: 20px;
    span {
      color: #1559b8;
      display: inline-block;
      width: 120px;
      margin-left: 5px;
    }
  }
}
/deep/.submit_tips {
  text-align: center !important;
  margin: 25px 0 10px;
  .el-button {
    margin: 0 10px;
  }
  .el-checkbox {
    margin-left: 20px;
  }
}
@media screen and (max-width: 1500px) {
  /deep/.todo-item {
    width: 45% !important;
    margin-right: 5% !important;
    &:nth-child(3n) {
      margin-right: 5% !important;
    }
    &:nth-child(2n) {
      margin-right: 0 !important;
    }
    &:nth-child(n + 4) {
      border-bottom: 0;
      margin-top: 0;
    }
    &:nth-child(n + 3) {
      border-bottom: 1px solid #e4e4e4;
      margin-top: 20px;
    }
  }
  /deep/ .common-use {
    .con-item {
      width: 45% !important;
      margin-right: 5% !important;
      &:nth-child(3n) {
        margin-right: 5% !important;
      }
      &:nth-child(2n) {
        margin-right: 0 !important;
      }
      &:nth-child(n + 4) {
        margin-top: 0;
      }
      &:nth-child(n + 3) {
        margin-top: 15px;
      }
    }
  }
  /deep/ .mertic-con {
    .con-item {
      width: 45% !important;
      margin-right: 5% !important;
      &:nth-child(3n) {
        margin-right: 5% !important;
      }
      &:nth-child(2n) {
        margin-right: 0 !important;
      }
      &:nth-child(n + 4) {
        margin-top: 0;
      }
      &:nth-child(n + 3) {
        margin-top: 15px;
      }
    }
  }
}
</style>
